<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
<link rel="stylesheet" href="../../javascript/plug-ins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../css/style.css" />		
<link rel="stylesheet" href="../../css/mobile_weixin.css" />	
	</head>
	<body>
		
	   <div class="page-wrap">		
		
		<section class="page-hd t">         
         <header>
			<h5 class="title">
				<a href="weixin_menu.html" class="red">编辑菜单</a>			
			</h5>	
		 </header>
		 <hr>
		</section>
		
		
		<div class="panel panel-default">
		  
		  <div class="flex flex-col-2 flex-wrap margin_top10"> 
		  	<div class="box-child width10 form-label">菜单组名称：</div>
		   	<div class="box-child width70 form-cont"><input type="text" placeholder="菜单名称" value="" class="form-control" /></div> 
		  </div><!----flex----->
		  
		  <div class="flex flex-wrap margin_top20">
		   <div class="box-child width40">
		   	 <div class="mobile-menu-preview">
		   	   <div class="mobile-menu-name">默认菜单</div>	 
		   	   <div class="pre-menu-list flex ui-sortable">
		   	   	
		     
		   	   </div><!--pre-menu-list--->		     
		   	 </div><!--mobile-menu-preview--->
		    
		   </div><!--box-child---->
		   <div class="box-child width60">
		   	 <div class="menu-form-area">
	   	 	    <div class="flex flex-col-2 menu-form-name flex-wrap margin_top10"> 
		  	       <div class="box-child form-label">当前菜单</div>
		   	       <div class="box-child form-cont text-right"><a href="#" class="text-info remove_meun">删除菜单</a></div> 
		        </div><!----flex----->
		        
		        <div class="flex flex-col-2 flex-wrap margin_top10"> 
		  	       <div class="box-child width20 form-label text-center">菜单名称:</div>
		   	       <div class="box-child width70 form-cont text-left"><input type="text" class="form-control" placeholder="请输入菜单名称" /></div> 
		        </div><!----flex----->
		        
		        <div class="flex flex-col-2 flex-wrap margin_top10"> 
		  	       <div class="box-child width20 form-label text-center">页面地址:</div>
		   	       <div class="box-child width70 form-cont"><input type="text" class="form-control" placeholder="请输入页面地址" /><span class="word-aux"><i class="icon-warning-sign"></i>指定点击此菜单时要跳转的链接（注：链接需加http://）</span></div> 
		        </div><!----flex----->
		        
		   	 </div><!--menu-form-area--->
		   </div><!--box-child width60--->
		  </div><!----flex----->
		  
		  <div class="flex flex-wrap margin_top20"> 
	        <input type="button" value="发布" class="btn btn-info margin_left20" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	        <input type="button" value="返回上一步" class="btn btn-info" />
		  </div><!----flex----->
		  		  

		
		</div><!---panel--->
			
	   </div><!---page-wrap------>		
		

		
		        	
	</body>
<script src="../../javascript/jquery.js"></script>
<script src="../../javascript/public.js"></script>
	<script>
		
 
    searwidth();
    
    //加载判断大类型个数并设置宽度
    function searwidth(){
    	
    	
     var sd=$(".ui-sortable").children(".box-child").length;
     
      if(sd<=2){ 
       $(".ui-sortable").append('<div class="box-child sub-mueu-plusall"><div class="sub-js-sortable sub-mueu-plus text-center" onclick="sub_mueu_plus(this)"><i class="icon-plus" ></i>添加菜单</div></div>');
      
       if(sd==0){
        $(".ui-sortable").children(".box-child").width(100+"%");
       }else{
      	$(".ui-sortable").children(".box-child").width(100/(sd+1)+"%");      	
       }
          
      }
     }  
    
    //新增大类型并从新定义大类型宽度
    function sub_mueu_plus(n){
    	
      var sf=$(".ui-sortable").children(".box-child").length;	
      
      if(sf<=2){      	      
  	    $(n).parent(".box-child").before('<div class="box-child" ><div onclick="remove_box(this,2)" class="remove_box_title"><i class="icon-globe"></i>菜单名称</div><div class="sub-pre-menu-box"><div class="sub-js-sortable sub-js-plus" onclick="sub_js_plus(this)"><i class="icon-plus" ></i></div></div></div>');        
       	$(".ui-sortable").children(".box-child").width(100/sf+"%");      
      }else if(sf==3){
      	 $(n).parent(".box-child").before('<div class="box-child"><div onclick="remove_box(this,2)" class="remove_box_title"><i class="icon-globe"></i>菜单名称</div><div class="sub-pre-menu-box"><div class="sub-js-sortable sub-js-plus" onclick="sub_js_plus(this)"><i class="icon-plus" ></i></div></div></div>');        
       	 $(".ui-sortable").children(".box-child").width(100/sf+"%");
       	 $(".ui-sortable").children(".sub-mueu-plusall").remove();
      }
     
    };
	 
	//添加子栏目
	function sub_js_plus(b){	 
		
  	  var numbers=$(b).siblings().length;
  	   $(b).before('<div class="sub-js-sortable sub-js-item" onclick="remove_box(this,1)">子菜单名称'+numbers+'</div>');	    	
  	   if(numbers>=4){
  	  	 $(b).remove();
  	   }    	      	 
	 	  
	}
	
	//给各个栏目设置当前选中的栏目
	function remove_box(w,ty){
		$(w).parents(".ui-sortable").find("div").removeClass("sub-on-item");
		$(w).addClass("sub-on-item");//remove_box
	}
	
	//根据选择的栏目进行删除
	$(".remove_meun").click(function(){
		
		var q=$(".ui-sortable").find(".sub-on-item").siblings(".sub-js-item").length;
		var parentname=$(".ui-sortable").find(".sub-on-item").parent().hasClass("sub-pre-menu-box");
		if(parentname==true){//二级
			if(q==4){
				$(".ui-sortable").find(".sub-on-item").parent(".sub-pre-menu-box").append('<div class="sub-js-sortable sub-js-plus" onclick="sub_js_plus(this)"><i class="icon-plus"></i></div>');
				$(".ui-sortable").find(".sub-on-item").remove();
			}else{
				$(".ui-sortable").find(".sub-on-item").remove();
			}
		}else{//一级
			if(confirm("将同时删除所有子菜单，是否继续?")){
　　                      $(".ui-sortable").find(".sub-on-item").parent(".box-child").remove();     
               var r=$(".ui-sortable .box-child").length;  
               if($(".ui-sortable .box-child:not('.sub-mueu-plusall')").length==2){
               	  $(".ui-sortable").append('<div class="box-child sub-mueu-plusall"><div class="sub-js-sortable sub-mueu-plus text-center" onclick="sub_mueu_plus(this)"><i class="icon-plus" ></i>添加菜单</div></div>');      
               }               
               $(".ui-sortable .box-child").width(100/r+"%");                              
			}
		}
		return false;
	});
	
	</script>
			
</html>
